<template>
  <div >
    <div style="margin-top: 30%;">
      <van-cell-group inset>
        <van-contact-card type="add"  icon-prefix="star" @click="onAdd" :editable="false" add-text="青海省重大项目微信办公平台" />
        <van-field v-model="form.userName" label="姓名" placeholder="请输入您的姓名" maxlength="11"/>
        <van-field v-model="form.phone" label="手机号" placeholder="请输入手机号" maxlength="11"/>
        <!-- <van-field
          v-model="form.smsCode"
          center
          clearable
          label="验证码"
          placeholder="请输入验证码"
        >
          <template #button>
            <van-button size="mini" type="primary">发送验证码</van-button>
          </template>
        </van-field> -->
        <div style="margin-top: 20px">
          <van-button type="primary" block @click="bindPhone">绑定账号</van-button>
        </div>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import { Toast } from 'vant';
import { reactive, ref } from "vue";
import { bingAccount } from '../api/interface';
import router from '../router/router';
import store from '../store/store';
const form = reactive({
  userName:"",
  // smsCode:1234,
  phone:""
})

// 绑定用户
const bindPhone =()=>{
    const reg = /^1[3-9]\d{9}$/;
    if (!form.userName) return Toast("请输入姓名！");
    if (!reg.test(form.phone)) return Toast("请输入正确的手机号！");
    // if(form.smsCode != 1234) return Toast("验证码错误");
    let userInfo = store.getters.userInfo
    let params = {
      id: userInfo.id||userInfo.openid,
      userName: form.userName,
      phone: form.phone,
      nickName: userInfo.nickname,
      headimgurl: userInfo.headimgurl,
      sex: userInfo.sex,
      unionid: userInfo.unionid
    }
    bingAccount(params).then((res) =>{
      router.push({path:"/findProject",replace:true})
      store.commit("setUserInfo",res.data)
      Toast.success("绑定成功")
    })
}
</script>

<style  scoped lang="scss">

</style>